<!DOCTYPE html>
<style>
body { margin: 0; }
</style>

<svg xmlns="http://www.w3.org/2000/svg" width="384" height="64" viewBox="0 0 384 64">
<g transform="translate(192,32)">
<text font-size="20px">LTR horizonal</text>
<circle cx="0" cy="0" r="4" fill="red" />
</g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="384" height="64" viewBox="0 0 384 64">
<g transform="translate(192,32)">
<text font-size="20px" direction="rtl">سلام RTL horizonal</text>
<circle cx="0" cy="0" r="4" fill="red" />
</g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="384" height="64" viewBox="0 0 384 64" style="zoom:2">
<g transform="translate(96,32)">
<text font-size="20px" text-rendering="geometricPrecision">LTR geometricPrecision</text>
<circle cx="0" cy="0" r="4" fill="red" />
</g>
</svg>
<br>

<svg xmlns="http://www.w3.org/2000/svg" width="64" height="256" viewBox="0 0 64 256">
<g transform="translate(32, 28)">
<text font-size="20px" writing-mode="tb">LTR vertical</text>
<circle cx="0" cy="0" r="4" fill="red" />
</g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="64" height="256" viewBox="0 0 64 256">
<g transform="translate(32,128)">
<text font-size="20px" direction="rtl" writing-mode="tb">سلام RTL vertical</text>
<circle cx="0" cy="0" r="4" fill="red" />
</g>
</svg>
